// components/week-calendar/week-calendar.ts
import dayjs from "dayjs"
import {get} from "@utils/http"
import { tipBehavior } from "@mixin/tip"
import { getDynamicBehavior } from "@mixin/dynamic"
import { CalendarNodeType } from "miniprogram/@types/Calendar"
import { ActivityType } from "miniprogram/@types/Activity"
import { FormEvent } from "miniprogram/@types/Event"
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    location:{},
    mode:"",
  },
  observers:{
    "location.**":function(){
      this.init()
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    time:null,
    month:dayjs().format("M月"),
    weekDate:[],
    dayTime:[],
    WeekactivityList:[]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init:async function(){
      this.setData({
        time:this.data.time||dayjs()
      })
      await this.getWeekActivity()
      this.initWeekCalendar()
    },
    getWeekActivity:async function(){
      const time=this.data.time
      const res=await get("/activity",{
        campus:this.properties.location.selectRegion,
        school:this.properties.location.selectSchool,
        start:time.startOf("week").format("YYYY-MM-DD HH:mm:ss"),
        end:time.endOf("week").format("YYYY-MM-DD HH:mm:ss"),
        flag:0,
        verified:1
      })
      this.setData({
        weekActivityList:res
      })
    },
    initWeekCalendar(){
      const startTime=dayjs().set("h",8).set("m",0)
      const dayTime=[]
      for(let i=0;i<7;i++){
        dayTime.push(startTime.add(i*2,"h").format("HH:mm"))
      }
      this.setData({
        dayTime,
      })
      const time=this.data.time
      const week=["日","一","二","三","四","五","六"]
      const weekDate:{date:string,day:number,list:CalendarNodeType[]}[]=week.map((item,index)=>{
        const dayCalendar:CalendarNodeType[]=[]
        for(let i=0;i<7;i++){
          dayCalendar.push({
            primary:false,
            yellow:false,
            blue:false
          })
        }
        return {
          date:item,
          day:time.startOf(("week")).add(index,"day").date(),
          list:dayCalendar
        }
      })
      this.data.weekActivityList.forEach((activity:ActivityType) => {
        const start=dayjs(activity.start)
        const column=start.day()
        const row=Math.floor(start.diff(start.hour(8),"hour")/2)
        if(row<weekDate[column].list.length&&row>0){
          const color=activity.type==="娱乐"?"blue":activity.type==="交友"?"yellow":"primary"
          weekDate[column].list[row][color]=true
        }
      });
      this.setData({
        weekDate,
      })
    },
    async changeWeek(e:FormEvent<{i:number}>){
      const i=e.currentTarget.dataset.i      
      const time=this.data.time.add(i*7,"day")
      this.setData({
        time,
        month:time.format("M月")
      })
      await this.getWeekActivity()
      this.initWeekCalendar()
    },
    getDetail(e:FormEvent<{day:{day:number}}>){
      const time=this.data.time.date(e.currentTarget.dataset.day.day)
      this.triggerEvent("getDetail",time)
    },
  },
})